<nz-card>
  <div class="seach-wrap">
    <div class="seach-lf">
      <nz-space>
        <button *nzSpaceItem nz-button nzType="primary" (click)="openModel(0)">新增板块</button>
      </nz-space>
    </div>
  </div>
  
  <main class="pagination-wrap-position">
    <!-- Table -->
    <div class="table-wrap">
        <nz-table
          #basicTable
          nzSize="small"
          nzShowSizeChanger
          nzShowQuickJumper
          nzOuterBordered
          [nzFrontPagination]="false"
          [nzLoadingDelay]="100"
          [nzLoading]="tableForms.tableLoading"
          [nzData]="tableData"
          [nzPageSizeOptions]="[5, 10, 20, 50, 100]"
          [nzTotal]="tableForms.total"
          [nzPageIndex]="tableForms.page"
          [nzPageSize]="tableForms.pageSize"
          [nzShowTotal]="totalTemplate"
          (nzPageIndexChange)="onPageIndexChange($event)"
          (nzPageSizeChange)="onPageSizeChange($event)"
        >
          <thead>
            <tr>
              <th nzAlign="center" nzWidth="120px">ID</th>
              <th nzAlign="center">板块名字</th>
              <th nzAlign="center">图标</th>
              <th nzAlign="center">板块类型</th>
              <th nzAlign="center">排序</th>
              <th nzAlign="center">包含分类数</th>
              <th nzAlign="center">状态</th>
              <th nzAlign="center" nzWidth="300px">操作</th>
            </tr>
          </thead>
  
          <tbody>
            <tr *ngFor="let data of basicTable.data; let index = index;">
              <td nzAlign="center">{{ data.id }}</td>
              <td nzAlign="center">{{ data.boardName || '-' }}</td>
              <td nzAlign="center">
                <img nz-image width="40px" height="40px" [nzSrc]="data.smallIcon" [nzFallback]="fallback" alt="" />
              </td>
              <td nzAlign="center">
                {{ data.boardType == 0 ? '用户' : '系统' }}
              </td>
              <td nzAlign="center">{{ data.sort }}</td>
              <td nzAlign="center">{{ data.typeCount }}</td>
              <td nzAlign="center">
                <span [ngStyle]="{'color': data.status == 0 ? '#f00000' : '#008000'}">
                  {{ data.status == 0 ? '无效' : data.status == 1 ? '有效' : '-' }}
                </span>
              </td>
              <td nzAlign="center">
                <button
                  nz-button
                  nzType="link"
                  (click)="openModel(1, data)">
                  编辑
                </button>
                <a
                  nz-button
                  nzType="text"
                  nzDanger
                  nz-popconfirm
                  nzPopconfirmTitle="确认删除吗?"
                  [nzIcon]="iconTpl"
                  (nzOnConfirm)="deleteItem(data)">删除</a>
                <ng-template #iconTpl>
                  <i nz-icon nzType="question-circle-o" style="color: red;"></i>
                </ng-template>
              </td>
            </tr>
          </tbody>
        </nz-table>
  
        <!-- 分页template -->
        <ng-template #totalTemplate let-total>共有 {{ tableForms.total }} 条</ng-template>
    </div>
  </main>
</nz-card>

<!-- model START -->
<nz-modal
  nzClassName="modelm-wrap custom-model-wrap"
  [nzWidth]="600"
  [(nzVisible)]="isModelVisible"
  [nzTitle]="modelType == 0 ? '新增板块' : '编辑板块'"
  [nzOkLoading]="subLoading"
  [nzContent]="modalContent"
  [nzFooter]="null"
  (nzOnCancel)="handleCancel()">
  <ng-template #modalContent>
    <div class="custom-model-body">
      <form nz-form [formGroup]="validateForm">
        <nz-form-item>
          <nz-form-label [nzSpan]="7" class="label-sp" nzRequired>板块名字</nz-form-label>
          <nz-form-control [nzSpan]="12" nzErrorTip="请输入板块名字">
            <input nz-input formControlName="boardName" placeholder="请输入板块名字" />
          </nz-form-control>
        </nz-form-item>
  
        <nz-form-item>
          <nz-form-label [nzSpan]="7" class="label-sp" nzRequired>板块类型</nz-form-label>
          <nz-form-control [nzSpan]="12" nzErrorTip="请选择板块类型">
            <nz-select nzShowSearch nzAllowClear nzPlaceHolder="请选择板块类型" formControlName="boardType">
              <nz-option nzLabel="系统" nzValue="1"></nz-option>
              <nz-option nzLabel="用户" nzValue="0"></nz-option>
            </nz-select>
          </nz-form-control>
        </nz-form-item>
  
        <nz-form-item>
          <nz-form-label [nzSpan]="7" class="label-sp">副标题</nz-form-label>
          <nz-form-control [nzSpan]="12">
            <input nz-input formControlName="subtitle" placeholder="请输入副标题" />
          </nz-form-control>
        </nz-form-item>
  
        <nz-form-item>
          <nz-form-label [nzSpan]="7" class="label-sp" nzRequired>大图标</nz-form-label>
          <nz-form-control [nzSpan]="12" nzErrorTip="请选择大图标">
            <nz-upload
              class="upload-img-box"
              nzAccept="image/*"
              nzAction=""
              nzListType="picture-card"
              (nzChange)="onModalPreview($event, 0)"
              [nzShowUploadList]="false">
              <div ngDefaultControl formControlName="largeIcon">
                <ng-container *ngIf="!validateForm.value.largeIcon">
                  <i class="upload-icon" nz-icon [nzType]="bigLoading ? 'loading' : 'plus'"></i>
                </ng-container>
                <img *ngIf="validateForm.value.largeIcon" [src]="validateForm.value.largeIcon" style="width: 100%" />
              </div>
            </nz-upload>
          </nz-form-control>
        </nz-form-item>
  
        <nz-form-item>
          <nz-form-label [nzSpan]="7" class="label-sp" nzRequired>小图标</nz-form-label>
          <nz-form-control [nzSpan]="12" nzErrorTip="请选择小图标">
            <nz-upload
              class="upload-img-box"
              nzAccept="image/*"
              nzAction=""
              nzListType="picture-card"
              (nzChange)="onModalPreview($event, 1)"
              [nzShowUploadList]="false">
              <div ngDefaultControl formControlName="smallIcon">
                <ng-container *ngIf="!validateForm.value.smallIcon">
                  <i class="upload-icon" nz-icon [nzType]="smallLoading ? 'loading' : 'plus'"></i>
                </ng-container>
                <img *ngIf="validateForm.value.smallIcon" [src]="validateForm.value.smallIcon" style="width: 100%" />
              </div>
            </nz-upload>
          </nz-form-control>
        </nz-form-item>
  
        <nz-form-item>
          <nz-form-label [nzSpan]="7" class="label-sp" nzRequired>排序</nz-form-label>
          <nz-form-control [nzSpan]="12" nzErrorTip="请输入排序">
            <nz-input-number [nzMin]="0" [nzPrecision]="0" [nzStep]="1" nzPlaceHolder="请输入排序" formControlName="sort"></nz-input-number>
          </nz-form-control>
        </nz-form-item>
  
        <nz-form-item>
          <nz-form-label [nzSpan]="7" class="label-sp" nzRequired>状态</nz-form-label>
          <nz-form-control [nzSpan]="12" nzErrorTip="请选择状态">
            <nz-radio-group formControlName="status">
              <label nz-radio nzValue="1">有效</label>
              <label nz-radio nzValue="0">无效</label>
            </nz-radio-group>
          </nz-form-control>
        </nz-form-item>
      </form>
    </div>
    
    <div class="custom-model-foot">
      <div class="custom-foot-cont">
        <button nz-button nzType="default" (click)="handleCancel()">取消</button>
        <button nz-button nzType="primary" (click)="handleOk()">确定</button>
      </div>
    </div>
  </ng-template>
</nz-modal>
<!-- model END -->